<template>
  <div>
    <Row>
      <Col span="2" offset="1">
        <Button type="error" @click="removeAll">批量删除</Button>
      </Col>
      <Col span="10" offset="1">
        <span>用户名&nbsp;</span>
        <Input v-model="params.name" clearable style="width: 150px" />
        <Input type="hidden" style="width: 50px" />
        <span>角色&nbsp;</span>
        <Select v-model="params.role" clearable style="width:200px">
          <Option value="用户">用户</Option>
          <Option value="管理员">管理员</Option>
        </Select>
      </Col>
      <Col span="8">
        <Button type="primary" @click="search">搜索</Button>
        <Input type="hidden" style="width: 100px" />
        <Button type="success" @click="addButton">新增</Button>
        <Input type="hidden" style="width: 50px" />
        <Button type="warning" @click="exportExcel">导出</Button>
      </Col>
    </Row>
    <br />
    <Row>
      <Table border ref="selection" :columns="columns" :data="userList"></Table>
    </Row>
    <br />
    <Row>
      <span>共{{total}}条记录</span>
      <Page :total="total" :page-size="params.size" @on-change="changePage" style="float: right" />
    </Row>
    <Modal width="400px" title="新增用户" v-model="flag" @on-ok="ok">
      <Form :model="userForm" :label-width="80">
        <FormItem v-if="editFlag" label="邮箱" prop="username">
          <Input type="text" v-model="userForm.username" disabled style="width:200px"></Input>
        </FormItem>
        <FormItem v-else label="邮箱" prop="username">
          <Input type="text" v-model="userForm.username" style="width:200px"></Input>
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input type="text" v-model="userForm.name" style="width:200px"></Input>
        </FormItem>
        <FormItem label="角色" prop="role">
          <Select v-model="userForm.role" clearable style="width:200px">
            <Option value="用户">用户</Option>
            <Option value="管理员">管理员</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import * as userApi from "@/api/user.js";
import excel from "@/libs/excel";
export default {
  data() {
    return {
      flag: false,
      editFlag: false,
      userForm: {
        name: "",
        username: "",
        role: ""
      },
      params: {
        name: "",
        role: "",
        page: 1,
        size: 10
      },
      delId: null,
      roleList: null,
      total: 8,
      userList: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "用户id",
          key: "id"
        },
        {
          title: "用户名(邮箱)",
          key: "username"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "角色",
          key: "role"
        },
        {
          title: "上次登录时间",
          key: "lastLogin"
        },
        {
          title: "创建时间",
          key: "creatTime"
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == "1") {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:#67C23A;"
                  },
                  ""
                ),
                h("span", "可用")
              ]);
            } else {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:red;"
                  },
                  ""
                ),
                h("span", "已删除")
              ]);
            }
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.userForm.name = params.row.name;
                      this.userForm.username = params.row.username;
                      this.userForm.role = params.row.role;
                      this.flag = true;
                      this.editFlag = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    initList: function() {
      userApi.getUserList(this.params).then(res => {
        if (res.data.code == 200) {
          this.userList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    search: function() {
      this.params.page = 1;
      this.initList();
    },
    changePage: function(page) {
      this.params.page = page;
      this.initList();
    },
    remove: function(row) {
      this.delId = row.id;
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除这条记录吗?</p>",
        onOk: () => {
          userApi.remove(this.delId).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.success(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    removeAll: function() {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除这条记录吗?</p>",
        onOk: () => {
          const userList = this.$refs.selection.getSelection();
          userApi.removeAll(userList).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    ok: function() {
      if (this.editFlag) {
        userApi.edit(this.userForm).then(res => {
          if (res.data.code == 200) {
            this.$Message.success("修改成功");
            this.initList();
          } else {
            this.$Message.error("修改失败");
          }
          this.editFlag = false;
        });
      } else {
        userApi.add(this.userForm).then(res => {
          if (res.data.code == 200) {
            this.$Message.success("新增用户成功");
            this.initList();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }
      this.flag = false;
    },
    addButton: function() {
      this.userForm.name = "";
      this.userForm.username = "";
      this.userForm.role = "";
      this.flag = true;
    },
    exportExcel() {
      if (this.userList.length) {
        userApi.findAll().then(res => {
          if (res.data.code == 200) {
            this.exportLoading = true;
            const params = {
              title: [
                "用户id",
                "用户名(邮箱)",
                "名称",
                "角色",
                "上次登录时间",
                "创建时间",
                "状态"
              ],
              key: [
                "id",
                "username",
                "name",
                "role",
                "lastLogin",
                "creatTime",
                "status"
              ],
              data: res.data.data,
              autoWidth: true,
              filename: "用户列表"
            };
            excel.export_array_to_excel(params);
            this.exportLoading = false;
          } else {
            this.$Message.error("服务器未知错误");
          }
        });
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    }
  },
  mounted() {
    this.initList();
  }
};
</script>
